<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
</table>
<script>
    //3.定义一个数组,模拟从服务器请求回来的数据
    let arr = [
        {name: '黄霄雲', age: 18, sex: '女'},
        {name: '孙雪宁', age: 18, sex: '女'},
        {name: '李庚希', age: 18, sex: '女'},
        {name: '刘浩存', age: 18, sex: '女'},
        {name: '关晓彤', age: 18, sex: '女'},
        {name: '欧阳娜娜', age: 18, sex: '女'},
        {name: '单依纯', age: 18, sex: '女'},
        {name: '蒋依依', age: 18, sex: '女'},
        {name: '赵今麦', age: 18, sex: '女'},
        {name: '迪丽热巴', age: 18, sex: '女'},
    ];
    //1.获取表格元素
    let table = document.querySelector('table');
    for (let i = 0; i < arr.length; i++) {
        // 2..创建tr
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        // 3..将td的内容设置为obj对象的属性值
        td1.innerHTML = arr[i].name;
        td2.innerHTML = arr[i].age;
        td3.innerHTML = arr[i].sex;
        // 4..将td添加到tr中
        tr.append(td1, td2, td3);
        // 5.添加新行
        table.append(tr);
    }

    //1.创建一个自带属性与方法的对象
    let obj = {
        name: '黄霄雲',
        age: 18,
        sing: function () {
            console.log('我是' + this.name + ',我喜欢唱歌');
        }
    }
    console.log(obj);
    obj.sing();

    //2.先创建一个空对象,再动态添加其属性与方法
    let p2 = {};
    p2.name = '孙雪宁';
    p2.age = 18;
    p2.dance = function () {
        console.log('我是' + this.name + ',我喜欢跳舞');
    }
    console.log(p2);
    p2.dance();
</script>
</body>
</html>